<script setup lang="jsx">
import shoppingCartService from '@/api/modules/shoppingcart.js'
import Stepper from '@/components/Stepper/Stepper.vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const columns = ref([
  {
    type: 'selection',
  },
  {
    title: t('goods'),
    key: 'name',
    render(row) {
      return (
        <div class="flex justify-center space-x-5">
          <div class="!w-45">
            <n-image
              width="100"
            />
          </div>
          <div class="flex-1">
            <div class="line-clamp-2 text-lg font-bold">
              { row.productName }
            </div>
            <div class="mt-5 flex flex-wrap gap-2">
              <n-button strong secondary round type="info" size="small">
                { t('shopList.partNumber') }
                ：
                { row.productNumber }
              </n-button>
              <n-button strong secondary round type="info" size="small">
                { t('shopList.specs') }
                ：
                { row.productSpecification }
              </n-button>
              <n-button strong secondary round type="info" size="small">
                { t('shopList.weight') }
                ：
                { row.productWeight }
                KG
              </n-button>
            </div>
          </div>
        </div>
      )
    },
  },
  {
    title: t('unitPrice'),
    key: 'price',
    render(row) {
      return (
        <div className="text-xl font-bold text-red-500">
          ¥
          {row.unitPrice}
        </div>
      )
    },
  },
  {
    title: t('quantity'),
    key: 'number',
    render(row) {
      return (
        <Stepper v-model:value={row.quantity} min={1} onClick={() => handleChangeCartNumber(row.id, row.quantity)}></Stepper>
      )
    },
  },
  {
    title: '',
    key: 'actions',
    render(row) {
      return (
        <div class="flex justify-center space-x-5">
          <n-button size="small" type="text">
          </n-button>
        </div>
      )
    },
  },
])
const cartList = ref([])
const selectedRowArray = ref([])
const selectedTotal = computed(() => {
  return selectedRowArray.value.length
})

const totalPrice = computed(() => {
  const selectedRows = selectedRowArray.value
  const selectedItems = cartList.value.filter(item => selectedRows.includes(item.id))
  const total = selectedItems.reduce((total, item) => total + item.unitPrice * item.quantity, 0)
  return total.toFixed(2)
})
onMounted(() => {
  getCartData()
})

function getCartData() {
  shoppingCartService.list({
    pageNum: 1,
    pageSize: 99999,
    delFag: 0,
  }).then((res) => {
    cartList.value = res.rows
  })
}

function handleChangeCartNumber(id, val) {
  cartList.value.forEach((item) => {
    if (item.id === id) {
      item.quantity = val
    }
  })
}

function handleDateTableCheckedRowKeys(selectedRows) {
  selectedRowArray.value = selectedRows
}
</script>

<template>
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
    <n-card :title="t('cart.myCart')">
      <n-data-table
        :columns="columns" :data="cartList"
        :row-key="(row) => row.id"
        @update:checked-row-keys="handleDateTableCheckedRowKeys"
      />
      <div class="sticky bottom-0 w-full flex items-center justify-between bg-white p-4">
        <div class="flex gap-2 items-center">
          <i18n-t keypath="cart.selectedItems" tag="div" for="num">
            <template #num>
              <span class="text-lg font-bold">{{ selectedTotal }}</span>
            </template>
          </i18n-t>
          <n-button v-if="selectedTotal > 0" quaternary type="error">
            {{ t('cart.delSelectedShop') }}
          </n-button>
        </div>
        <div class="flex gap-2">
          <div class="mb-3 flex items-center gap-2 text-right text-lg font-bold">
            <i18n-t keypath="cart.totalAmount" tag="div" class="relative top-[3px] min-w-[100px] flex items-center">
              <template #total>
                <span class="mx-1 text-2xl text-red-500 font-bold">{{ totalPrice }}</span>
              </template>
            </i18n-t>
          </div>
          <n-button type="primary"  :disabled="selectedTotal === 0">
            {{ t('cart.checkout') }}
          </n-button>
        </div>
      </div>
    </n-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
